<template>
  <div>
    <el-button type="primary" plain icon="ZoomOut" @click="processZoomOut()"
      >缩小视图</el-button
    >
    <el-button type="primary" plain icon="ZoomIn" @click="processZoomIn()"
      >放大视图</el-button
    >
    <el-button type="primary" plain icon="ScaleToOriginal" @click="processReZoom()"
      >重置视图并居中</el-button
    >
    <div>
      <div ref="flowCanvas"></div>
    </div>
  </div>
</template>

<script>
// import BpmnViewer from "bpmn-js/lib/Viewer";
// import "bpmn-js/dist/assets/diagram-js.css";
// import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
import { CustomViewer as BpmnViewer } from "../utils/CustomViewer";
import "bpmn-js/dist/assets/diagram-js.css";

export default {
  props: {
    xmlData: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      defaultZoom: 1,
      bpmnViewer: null
    };
  },
  watch: {
    xmlData: function(val) {
      if (val) {
        this.getImg(val)
      }
    }
  },
  mounted() {
    this.bpmnViewer = new BpmnViewer({
      container: this.$refs.flowCanvas,
      height: 'calc(100vh - 200px)',
    });
    this.getImg(this.xmlData)
  },

  methods: {
    async getImg(xmlUrl) {
      const self = this
      try {
        await self.bpmnViewer.importXML(xmlUrl);
        self.processReZoom()
      } catch (err) {
        console.error(err.message, err.warnings)
      }
    },
    processZoomOut(zoomStep = 0.1) {
      let newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;
      if (newZoom < 0.2) {
        throw new Error(
          "[Process Designer Warn ]: The zoom ratio cannot be less than 0.2"
        );
      }
      this.defaultZoom = newZoom;
      this.bpmnViewer.get("canvas").zoom(this.defaultZoom);
    },
    processZoomIn(zoomStep = 0.1) {
      let newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;
      if (newZoom > 4) {
        throw new Error(
          "[Process Designer Warn ]: The zoom ratio cannot be greater than 4"
        );
      }
      this.defaultZoom = newZoom;
      this.bpmnViewer.get("canvas").zoom(this.defaultZoom);
    },
    processReZoom() {
      this.defaultZoom = 1;
      this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
    },
  },
};
</script>

<style>
.bjs-powered-by {
    display: none;
}
</style>